<template>
  <div class="adminMenu">
    <el-card>
      <div class="addMenu">
        <el-button type="primary" width="120px" icon="Plus" @click="addMenu">添加</el-button>
      </div>
      <MenuTable
        :tableData="tableData"
        :columns="columns"
        @edit="handleEdit"
        @delete="handleDelete"
      ></MenuTable>
      <!-- 添加菜单 -->
      <el-dialog
        v-model="dialogVisible"
        title="添加"
        width="calc(40% - 40px)"
        class="addMenuDialog"
      >
        <el-form :model="menuForm" :rules="rules" ref="menuFormRef" label-width="100px">
          <el-row :gutter="20">
            <!-- 左列 -->
            <el-col :span="12">
              <el-form-item label="菜单名称" prop="name">
                <el-input v-model="menuForm.name" placeholder="请输入菜单名称" />
              </el-form-item>

              <el-form-item label="菜单图标" prop="icon">
                <el-input v-model="menuForm.icon" placeholder="请选择图标">
                  <template #append>
                    <el-button icon="Search" @click="openIconSelect" />
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item label="路由路径" prop="path">
                <el-input v-model="menuForm.path" placeholder="请输入路由路径" />
              </el-form-item>
            </el-col>

            <!-- 右列 -->
            <el-col :span="12">
              <el-form-item label="组件路径" prop="component">
                <el-input v-model="menuForm.component" placeholder="请输入组件路径" />
              </el-form-item>

              <el-form-item label="排序" prop="sort">
                <el-input-number v-model="menuForm.sort" :min="0" :max="999" />
              </el-form-item>

              <el-form-item label="菜单类型" prop="type">
                <el-radio-group v-model="menuForm.type">
                  <el-radio :label="1">目录</el-radio>
                  <el-radio :label="2">菜单</el-radio>
                  <el-radio :label="3">按钮</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 底部按钮, 跨越两列 -->
          <el-row>
            <el-col :span="24" style="text-align: center">
              <el-form-item>
                <el-button type="primary" @click="submitForm">保存</el-button>
                <el-button @click="resetForm">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </el-card>
    <Footer></Footer>
  </div>
</template>

<script setup lang="ts">
import Footer from "@/components/reuse/footer.vue";
import https from "@/utils/https";
import { ref, onMounted, reactive } from "vue";
import MenuTable from "@/components/reuse/menuTable.vue";

const dialogVisible = ref(false);
// 表格数据
const tableData = reactive([
  {
    id: "",
    name: "abc",
    path: "/user",
    component: "@/xxxxx.vue",
    meta: {
      title: "abc",
      hidden: "false",
      icon: "Hours",
    },
    children: [
      {
        id: "",
        name: "abc",
        path: "/user",
        component: '"@/xxxxx.vue"',
        meta: {
          title: "abc",
          hidden: "false",
          icon: "Hours",
        },
      },
    ],
  },
]);
// 表格列
const columns = reactive([
  {
    label: "标题",
    prop: "name",
  },
  {
    label: "路径",
    prop: "path",
  },
  {
    label: "vue文件路径",
    prop: "component",
  },
]);
// 获取路由菜单数组
const getMenu = async () => {
  const res = await https.get("/menu");
  console.log(res);
  if (res.code === 200) {
    console.log("获取成功");
    const { data } = res;
    Object.assign(tableData, data);
  }
  console.log(menuList.value);
};
onMounted(async () => {
  getMenu();
});
// 添加菜单
const addMenu = () => {
  dialogVisible.value = true;
};
// 编辑
const handleEdit = (row, index) => {
  console.log(row, index);
};
// 删除
const handleDelete = (row, index) => {
  console.log(row, index);
};
</script>

<style scoped>
.addMenu {
  margin-bottom: 20px;
}

.menu-container {
  padding: 20px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-input-number) {
  width: 100%;
}
</style>
